<!doctype html>
<html>
<head>
  <title>demo</title>
  <meta charset="utf-8"/>

  <link href="https://github.global.ssl.fastly.net/assets/github-e503554bd5ad06674d1b10d72e423102f78ab1d2.css" media="all" rel="stylesheet" type="text/css" />
  <link href="https://github.global.ssl.fastly.net/assets/github2-2357359f6823a4e414d202ebd002ff1d34492325.css" media="all" rel="stylesheet" type="text/css" />
  <link rel=stylesheet href="<?php echo base_url('resources/css');?>/custom.css" media="all" rel="stylesheet" type="text/css" />
  <link rel=stylesheet href="<?php echo base_url('resources/modules/ide');?>/lib/codemirror.css">
  <link rel=stylesheet href="<?php echo base_url('resources/css');?>/twilight.css" media="all" rel="stylesheet" type="text/css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="<?php echo base_url('resources/modules/ide');?>/lib/codemirror.js"></script>
  <script src="<?php echo base_url('resources/modules/ide');?>/mode/xml/xml.js"></script>
  <script src="<?php echo base_url('resources/modules/ide');?>/mode/css/css.js"></script>
  <script src="<?php echo base_url('resources/modules/ide');?>/addon/edit/matchbrackets.js"></script>
  <script src="<?php echo base_url('resources/modules/ide');?>/clike.js"></script>

</head>
<body>
    <div id="code-wrapper">
      <div id="header">
          
      </div>
      <div id="bar-controll">
        <div id="bar-controll-left">
            <button class="bar" id="convert"> Chuyển code</button>
            <button class="bar" id="browser-code"> Đổi màu nền</button>
            <button class="bar" id="browser-code"> Trợ giúp</button>
             <span id="loading" style="display: none; color: #fff; font-weight: bold;">Đang chuyển đổi, vui lòng đợi ... </span>
        </div>

        <div id="bar-controll-right">
            <button class="bar" id="convert"> Tải xuống</button>
            <button class="bar" id="browser-code"> Lấy mã</button>
        </div>
      </div>
      <div id="source-code">
        <div id="left">
             <div class="language-box">
                <div class="select-menu js-menu-container js-select-menu ">
                <span class="minibutton select-menu-button js-menu-target">
                  <span class="octicon octicon-list-unordered"></span>
                  <i>From Language:</i>
                  <span class="js-select-button">C </span>
                </span>

                <div class="select-menu-modal-holder js-menu-content js-navigation-container">
                  <div class="select-menu-modal">
                    <div class="select-menu-header">
                      <span class="select-menu-title">Select Menu Title</span>
                      <span class="octicon octicon-remove-close js-menu-close"></span>
                    </div> <!-- /.select-menu-header -->

                    <div class="select-menu-error-shell">
                      <span class="select-menu-error js-select-menu-error">Whoops, there was an error</span>
                    </div>

                    <div class="select-menu-list">
                      <div class="select-menu-clear-item select-menu-item js-navigation-item">
                        <span class="select-menu-item-icon octicon octicon-remove-close"></span>
                        <div class="select-menu-item-text">Clear item</div>
                      </div> <!-- /.select-menu-item -->

                      <div>
                        <div class="select-menu-item js-navigation-item">
                          <span class="select-menu-item-icon octicon octicon-check"></span>
                          <div class="select-menu-item-text js-select-button-text">List item 1</div>
                        </div> <!-- /.select-menu-item -->

                        <div class="select-menu-item js-navigation-item">
                          <span class="select-menu-item-icon octicon octicon-check"></span>
                          <div class="select-menu-item-text js-select-button-text">List item 2</div>
                        </div> <!-- /.select-menu-item -->

                        <div class="select-menu-item js-navigation-item">
                          <span class="select-menu-item-icon octicon octicon-check"></span>
                          <div class="select-menu-item-text js-select-button-text">List item 3</div>
                        </div> <!-- /.select-menu-item -->
                      </div>

                    </div> <!-- /.select-menu-list -->

                    <div class="select-menu-footer">
                      <span class="octicon octicon-gear"></span>
                      <a href="#">Extra options</a>
                    </div> <!-- /.select-menu-footer -->

                    <div class="select-menu-loading-overlay">Loading…</div>
                  </div> <!-- /.select-menu-modal -->
                </div> <!-- /.select-menu-modal-holder -->
              </div> <!-- /.select-menu -->

              <div class="language-support">
                 <span> C </span>
                 <span> C++ </span>
                 <span> Java </span>
                 <span> C# </span>
                 <span> Python </span>
                 <span> VB </span>
                 <span> Php </span>
                 <span> Js </span>
              </div>
             </div> <!--end language box -->
           <form method="post" action="<?php echo base_url('index.php/coder/get_code_convert');?>" id="code_convert">
            <textarea id="left-code" class="left_code"></textarea>
           </form>
         </div> <!-- end left -->

         <div id="right">
            <div class="language-box">
              <div class="select-menu js-menu-container js-select-menu ">
              <span class="minibutton select-menu-button js-menu-target">
                <span class="octicon octicon-list-unordered"></span>
                <i>To Language:</i>
                <span class="js-select-button">Java </span>
              </span>

              <div class="select-menu-modal-holder js-menu-content js-navigation-container">
                <div class="select-menu-modal">
                  <div class="select-menu-header">
                    <span class="select-menu-title">Select Menu Title</span>
                    <span class="octicon octicon-remove-close js-menu-close"></span>
                  </div> <!-- /.select-menu-header -->

                  <div class="select-menu-error-shell">
                    <span class="select-menu-error js-select-menu-error">Whoops, there was an error</span>
                  </div>

                  <div class="select-menu-list">
                    <div class="select-menu-clear-item select-menu-item js-navigation-item">
                      <span class="select-menu-item-icon octicon octicon-remove-close"></span>
                      <div class="select-menu-item-text">Clear item</div>
                    </div> <!-- /.select-menu-item -->

                    <div>
                      <div class="select-menu-item js-navigation-item">
                        <span class="select-menu-item-icon octicon octicon-check"></span>
                        <div class="select-menu-item-text js-select-button-text">List item 1</div>
                      </div> <!-- /.select-menu-item -->

                      <div class="select-menu-item js-navigation-item">
                        <span class="select-menu-item-icon octicon octicon-check"></span>
                        <div class="select-menu-item-text js-select-button-text">List item 2</div>
                      </div> <!-- /.select-menu-item -->

                      <div class="select-menu-item js-navigation-item">
                        <span class="select-menu-item-icon octicon octicon-check"></span>
                        <div class="select-menu-item-text js-select-button-text">List item 3</div>
                      </div> <!-- /.select-menu-item -->
                    </div>

                  </div> <!-- /.select-menu-list -->

                  <div class="select-menu-footer">
                    <span class="octicon octicon-gear"></span>
                    <a href="#">Extra options</a>
                  </div> <!-- /.select-menu-footer -->

                  <div class="select-menu-loading-overlay">Loading…</div>
                </div> <!-- /.select-menu-modal -->
              </div> <!-- /.select-menu-modal-holder -->
            </div> <!-- /.select-menu -->
             <div class="language-support">
               <span> C </span>
               <span> C++ </span>
               <span> Java </span>
               <span> C# </span>
               <span> Python </span>
               <span> VB </span>
               <span> Php </span>
               <span> Js </span>
            </div>

           </div> <!--end language box -->
           <form method="" action="">
            <textarea id="right-code"></textarea>
           </form>
         </div> <!-- end right -->
        <script src="<?php echo base_url('resources');?>/application.js"></script>
    </div> <!-- end source code -->

    <div id="result">
    </div>
  </div>
</body>
</html>
